import React, { PureComponent, Fragment } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'dva';
import { Link, routerRedux } from 'dva/router';
import {
  Table,
  Icon,
  Divider,
  Form,
  Select,
  DatePicker,
  Input,
  Card,
  Tag,
  Avatar,
  Checkbox,
  Rate,
  Progress,
  Button,
  Dropdown,
  Row,
  Col,
  Spin,
  Modal,
  message,
  Collapse,
  List,
  Radio,
  Tabs,
} from 'antd';
import querystring from 'querystring';
import FooterToolbar from 'components/FooterToolbar';
import PageHeaderLayout from '../../../layouts/PageHeaderLayout';
import ImageUploader from '../../../components/Falcon/Attachment/ImageUploader';
import ApplyOrderDisplayer from '../../../components/Falcon/ApplyOrderDisplayer';
import CustomerListEditor from '../../../components/Falcon/Customer/CustomerListEditor';
import AssetEditor from '../../../components/Falcon/Asset/AssetEditor';
import LoanEditor from '../../../components/Falcon/Loan/LoanEditor';
import RepaymentAbilityEditor from '../../../components/Falcon/RepaymentAbility/RepaymentAbilityEditor';
import CreditEditor from '../../../components/Falcon/Credit/CreditEditor';
//CreditEditor
//RepaymentAbilityEditor

//CustomerExtendEditor

import styles from './style.less';
import { timingSafeEqual } from 'crypto';

const Panel = Collapse.Panel;
const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const { TextArea } = Input;
const Option = Select.Option;
const { TabPane } = Tabs;
const ButtonGroup = Button.Group;

@connect(({ apply }) => ({
  apply,
}))
export default class FillApply extends PureComponent {
  state = {
    id: '',
    taskId: '',
    applyDisabled: null,
    width: '100%',
    modalVisible: false,
  };

  componentDidMount() {
    const { dispatch, location } = this.props;
    const params = querystring.parse(location.search.slice(1));
    this.setState({
      id: params.id,
      taskId: params.taskId,
      applyDisabled: params.applyDisabled == 1 ? true : false,
      loaded: true,
    });
    dispatch({
      type: 'apply/detailsApply',
      payload: {
        projectId: params.id,
      },
    });
    window.addEventListener('resize', this.resizeFooterToolbar);
  }
  componentWillUnmount() {
    window.removeEventListener('resize', this.resizeFooterToolbar);
  }

  handleBusinessSubmit = () => {
    const { dispatch } = this.props;
    dispatch({
      type: 'apply/businessAllCommit',
      payload: {
        projectId: this.state.id,
        taskId: this.state.taskId,
      },
      callback: () => {
        const { apply: { applyResult } } = this.props;
        if (applyResult.code == 200) {
          message.success('提交成功');
          dispatch(routerRedux.push('applyIndex'));
        } else {
          message.error(applyResult.message);
        }
      },
    });
  };

  resizeFooterToolbar = () => {
    const sider = document.querySelectorAll('.ant-layout-sider')[0];
    const width = `calc(100% - ${sider.style.width})`;
    if (this.state.width !== width) {
      this.setState({ width });
    }
  };

  handleProcessNode = () => {
    const { dispatch } = this.props;
    dispatch({
      type: 'apply/approvalProgress',
      payload: {
        projectId: this.state.id,
      },
    });
    this.setState({
      modalVisible: true,
    });
  };

  handleProcessNodeOK = () => {
    this.setState({
      modalVisible: false,
    });
  };

  handleProcessNodeCancel = () => {
    this.setState({
      modalVisible: false,
    });
  };

  render() {
    const {
      apply: {
        applyBusinessLoading,
        applyListDetails,
        applyLoading,
        applyApprovalProgress,
        applyPickCarLoading,
      },
    } = this.props;
    const action = (
      <div style={{ flex: '1' }}>
        <ButtonGroup>
          <Button onClick={this.handleProcessNode}>查看流程节点</Button>
        </ButtonGroup>
      </div>
    );

    return (
      <PageHeaderLayout
        className={styles.channelDetailsContainer}
        title={this.state.applyDisabled ? '业务详情' : '申请资料'}
        action={action}
      >
        {
          //  console.log("applyApprovalProgress",applyApprovalProgress)
        }
        {applyLoading ? (
          <div className={styles.spinContainer}>
            <Spin size="large" />
          </div>
        ) : (
          applyListDetails && (
            <Card>
              <Tabs tabPosition="top">
                <TabPane tab="客户信息" key="1">
                  <CustomerListEditor
                    id={this.state.id}
                    projectId={applyListDetails.projectId}
                    applyDisabled={this.state.applyDisabled}
                  />
                </TabPane>
                <TabPane tab="资产信息" key="2">
                  <AssetEditor
                    id={this.state.id}
                    projectId={applyListDetails.projectId}
                    applyDisabled={this.state.applyDisabled}
                  />
                </TabPane>
                <TabPane tab="业务信息" key="3">
                  <LoanEditor
                    id={this.state.id}
                    projectId={applyListDetails.projectId}
                    applyDisabled={this.state.applyDisabled}
                  />
                </TabPane>
                <TabPane tab="还款能力" key="4">
                  <RepaymentAbilityEditor
                    id={this.state.id}
                    projectId={applyListDetails.projectId}
                    applyDisabled={this.state.applyDisabled}
                  />
                </TabPane>
                <TabPane tab="资信情况" key="5">
                  {/* {JSON.stringify(applyListDetails.credit)} */}
                  <CreditEditor
                    applyDisabled={this.state.applyDisabled}
                    projectId={applyListDetails.projectId}
                  />
                </TabPane>
              </Tabs>
            </Card>
          )
        )}
        {this.state.applyDisabled ? (
          ''
        ) : (
          <FooterToolbar style={{ width: this.state.width }}>
            <Button
              type="primary"
              onClick={this.handleBusinessSubmit}
              loading={applyBusinessLoading}
            >
              提交
            </Button>
          </FooterToolbar>
        )}
        <Modal
          title="流程节点"
          visible={this.state.modalVisible}
          onCancel={this.handleProcessNodeCancel}
          onOk={this.handleProcessNodeOK}
          loading={applyPickCarLoading}
          footer={null}
        >
          <Row>
            <Collapse>
              {applyApprovalProgress &&
                applyApprovalProgress.map(item => {
                  return (
                    <Panel header={item.displayName + '  ' + item.updateTime} key={item.id}>
                      <p>节点名称：{item.displayName}</p>
                      <p>操作时间：{item.createTime}</p>
                      <p>处理人：{item.opname}</p>
                      <p>处理意见：{item.content}</p>
                    </Panel>
                  );
                })}
            </Collapse>
          </Row>
        </Modal>
      </PageHeaderLayout>
    );
  }
}
